{extend name="platform/base" /}
{block name="resources"}
<script src="ADMIN_JS/highcharts.js"></script>
<script src="ADMIN_JS/exporting.js"></script>
<script type="text/javascript" src="__STATIC__/My97DatePicker/WdatePicker.js"></script>
<style>
.tabmenu{
	height: 38px;
	padding: 0 15px;
}
.tabmenu ul{
	margin: 0;
    padding: 0;
    list-style-type: none;
}
.tabmenu ul li{
	height: 38px;
	line-height:38px;
	float: left;
/*     border-right: 1px solid #E3E3E3; */
}

.tabmenu ul li a{
	height: 38px;
	padding: 0 10px;
	line-height:38px;
	display: block;
	cursor: pointer;
}
.highcharts-container{
	position:relative;
	overflow:hidden;
	height:400px;
	font-size:12px;
}
.count-3,.count-4{
	display:none;
}
</style>
{/block}
{block name="main"} 
			
			<div class="row padder-v">
				<!-- 空白补充 -->
				<div class="col-sm-7 count-1"></div>
				<div class="col-sm-5 count-3"></div>
				<div class="col-sm-7 count-4"></div>
				
				<!-- 统计选择 -->
				<div class="col-sm-2">
					<select class="input-sm form-control" onchange="count_select(this.value)" id="type">
						<option value="1">按日统计</option>
						<option value="3">按周统计</option>
						<option value="4">按月统计</option>
					</select>
				</div>

				<!-- 年份 -->
				<div class="col-sm-1 count-4 count-3" >
					<select class="input-sm form-control" id="year">
						
					</select>
				</div>
				
				<!-- 月份 -->
				<div class="col-sm-1 count-4 count-3" >
					<select class="input-sm form-control" id="month">
						
					</select>
				</div>
				
				<!-- 周 -->
				<div class="col-sm-2 count-3" >
					<select class="input-sm form-control" id="week">
						
					</select>
					<!-- 放置周隐藏域 误删-->
					<span></span>
				</div>
				
				<!-- 日 -->
				<div class="col-sm-2 count-1" >
					<input type="text" id="day" placeholder="请选择开始日期" value="{$today|date='Y-m-d',###}" class="input-sm form-control" onclick="WdatePicker()"/>
				</div>
				
				<!-- 搜索 -->
				<div class="col-sm-1">
					<button class="btn btn-sm btn-default" type="button" onclick="search()">搜索</button>
				</div>
			</div>
			
		    <div class="row">
		        <div class="col-md-12">
			         <section class="panel panel-default">
			           <header class="panel-heading font-bold"><span class="count-title">{$today|date='Y-m-d',###}</span>统计数据</header>
			           <div class="panel-body">
			
							<table class="table table-striped b-light text-sm">
								<tbody>
									<tr style="background: rgb(255, 255, 255);">
									    <td style="border-top: 0;">
									        总下单金额&nbsp;<i title="有效订单的总金额" class="tip icon-question-sign"></i>
									        <br><b id="money">0.00元</b>
									    </td>
									    <td style="border-top: 0;">
									        总下单量&nbsp;<i title="有效订单的下单总数" class="tip icon-question-sign"></i>
									        <br><b id="num">0</b>
									    </td>
									    <td style="border-top: 0;">
									        下单会员数&nbsp;<i title="有效订单的下单会员总数" class="tip icon-question-sign"></i>
									        <br><b id="order_member_count">0</b>
									    </td>
									    <td style="border-top: 0;">
									        下单商品数&nbsp;<i title="有效订单的下单商品总数" class="tip icon-question-sign"></i>
									        <br><b id="order_goods_count">0</b>
									    </td>
									</tr>
									<tr style="background: rgb(255, 255, 255);">
									    <td style="border-top: 0;">
									        新增店铺数量&nbsp;<i title="新增店铺数量" class="tip icon-question-sign"></i>
									        <br><b id="add_shop_count">0</b>
									    </td>
									    <td style="border-top: 0;">
									        新增会员数量&nbsp;<i title="新增会员数量" class="tip icon-question-sign"></i>
									        <br><b id="add_member_count">0</b>
									    </td>
									    <td style="border-top: 0;">
									        新增商品数量&nbsp;<i title="新增商品数量" class="tip icon-question-sign"></i>
									        <br><b id="add_goods_count">0</b>
									    </td>
									    <td style="border-top: 0;">
									        
									    </td>
									</tr>	
								</tbody>
							</table>	
						</div>
					</section>
				</div>		    
			</div>

			<!-- 下单金额统计和下单数量统计 -->
			<div class="row">
              <div class="col-md-6">
                <section class="panel panel-default">
                  <header class="panel-heading font-bold"><span class="count-title">{$today|date='Y-m-d',###}</span>下单金额统计图</header>
                  <div class="panel-body">
                  	
					<div id="money_div" class="ui-tabs-panel" data-highcharts-chart="1">
						<div class="highcharts-container" id="highcharts-2" ></div>
					</div>
                  </div>
                </section>
              </div>
              <div class="col-md-6">
                <section class="panel panel-default">
                  <header class="panel-heading font-bold"><span class="count-title">{$today|date='Y-m-d',###}</span>订单数统计图</header>
                  <div class="panel-body">
					
					<div id="num_div" class="ui-tabs-panel ui-tabs-hide">
						<div class="highcharts-container" id="highcharts-3" ></div>
					</div>
                  </div>
                </section>
              </div>
            </div>
            
             
			<!-- <div class="row">
              <div class="col-md-6">
                <section class="panel panel-default">
                  <header class="panel-heading font-bold"><span class="current-day">{$today|date='Y-m-d',###}</span>店铺销售TOP6</header>
                  <div class="panel-body" style="min-height: 310px;">
                    <table  class="table table-striped b-light text-sm">
						<tr>
							<td>排行</td>
							<td style="text-align: left;">店铺信息</td>
							<td>销量</td>
						</tr>
						{foreach name="shop_rank" item="shop_info"}
						<tr>
							<td>
								{if condition="$key eq 0 "}
								<span class="frist">
								{elseif condition="$key eq 1"/}
								<span class="second">
								{elseif condition="$key eq 2"/}
								<span class="third">
								{else /}
								<span>
								{/if}{$key+1}</span>
							</td>
							<td title="{$shop_info.shop_name}" style="text-align: left;">
								<a href="{:__URL('SHOP_MAIN/shop/shopindex','shop_id='.$shop_info['shop_id'])}" target="_blank"><?php echo strlen($shop_info["shop_name"])>20 ? mb_substr($shop_info["shop_name"],0,20,'utf-8')."...":$shop_info["shop_name"]; ?></a>
							</td>
							<td>
								{if condition="$key eq 0 "}
								<span class="frist">
								{elseif condition="$key eq 1"/}
								<span class="second">
								{elseif condition="$key eq 2"/}
								<span class="third">
								{else /}<span>
								{/if}{$shop_info.shop_sales}</span>
							</td>
						</tr>
						{/foreach}
					</table>
                  </div>
                </section>
              </div>
              
              <div class="col-md-6">
                <section class="panel panel-default">
                  <header class="panel-heading font-bold"><span class="current-day">{$today|date='Y-m-d',###}</span>商品销售TOP6</header>
                  <div class="panel-body" style="min-height: 310px;">
	                  <table  class="table table-striped b-light text-sm">
						<tr>
							<td>排行</td>
							<td style="text-align: left;">商品信息</td>
							<td>销量</td>
						</tr>
						{foreach name="goods_list" item="goods_info"}
						<tr>
							<td>
								{if condition="$key eq 0 "}
								<span class="frist">
								{elseif condition="$key eq 1"/}
								<span class="second">
								{elseif condition="$key eq 2"/}
								<span class="third">
								{else /}
								<span>
								{/if}{$key+1}</span>
							</td>
							<td title="{$goods_info.goods_name}" style="text-align: left;">
								<a href="{:__URL('SHOP_MAIN/goods/goodsinfo','goodsid='.$goods_info['goods_id'])}" target="_blank"><?php echo strlen($goods_info["goods_name"])>20 ? mb_substr($goods_info["goods_name"],0,20,'utf-8')."...":$goods_info["goods_name"]; ?></a>
							</td>
							<td>
								{if condition="$key eq 0 "}
								<span class="frist">
								{elseif condition="$key eq 1"/}
								<span class="second">
								{elseif condition="$key eq 2"/}
								<span class="third">
								{else /}<span>
								{/if}{$goods_info.real_sales}</span>
							</td>
						</tr>
						{/foreach}
					</table>
                  </div>
                </section>
              </div>
            </div> -->            
            
            





		<script type="text/javascript">
		var saleNumChart,saleNumStatistical,saleNumStatistical, saleUnit,saleTitle,saleMoneyChart,saleMoneyStatistical,saleTimeStatistical,saleMoneyTimeStatistical;
		var saleTimeStatistical = [ '00:00', '01:00', '02:00', '03:00', '04:00',
									'05:00', '06:00', '07:00', '08:00', '09:00',
									'10:00', '11:00', '12:00', '13:00', '14:00',
									'15:00', '16:00', '17:00', '18:00', '19:00',
									'20:00', '21:00', '22:00', '23:00' ];
		var saleMoneyTimeStatistical = [ '00:00', '01:00', '02:00', '03:00', '04:00',
									'05:00', '06:00', '07:00', '08:00', '09:00',
									'10:00', '11:00', '12:00', '13:00', '14:00',
									'15:00', '16:00', '17:00', '18:00', '19:00',
									'20:00', '21:00', '22:00', '23:00' ];
		var saleNumStatistical = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
		var saleMoneyStatistical = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
		$(function() {
			
			saleNumChart = new Highcharts.Chart("highcharts-2",{
				title : {
					text : "下单金额统计",
					align : "center",
					useHTML : true
				},
				xAxis : {
					categories : saleTimeStatistical
				},
				lang : {
					printChart : "打印",
					downloadPNG : "导出PNG格式图片",
					downloadJPEG : "导出JPEG格式图片",
					downloadPDF : "导出PDF格式图片",
					downloadSVG : "导出SVG格式图片"
				},
				yAxis : {
					title : {
						text :saleUnit
					},
					plotLines : [ {
						value : 0,
						width : 1,
						color : '#808080'
					} ]
				},
				tooltip : {
					valueSuffix : saleUnit
				},
				legend : {
					enabled : false
				},
				credits : {
					enabled : false,// 默认值，如果想去掉版权信息，设置为false即可
					text : 'Niushop商城', // 显示的文字
					href : '#', // 链接地址
				},
				exporting : {
					allowHTML : true,
					buttons : {
						contextButton : {
						// text : '导出'
						}
					}
				},
				series : [ {
					name : '今日',
					data : saleNumStatistical
				}]
			});
			
			saleMoneyChart = new Highcharts.Chart("highcharts-3",{
				title : {
					text : "订单量统计",
					align : "center",
					useHTML : true
				},
				xAxis : {
					categories : saleMoneyTimeStatistical
				},
				lang : {
					printChart : "打印",
					downloadPNG : "导出PNG格式图片",
					downloadJPEG : "导出JPEG格式图片",
					downloadPDF : "导出PDF格式图片",
					downloadSVG : "导出SVG格式图片"
				},
				yAxis : {
					title : {
						text :saleUnit
					},
					plotLines : [ {
						value : 0,
						width : 1,
						color : '#808080'
					} ]
				},
				tooltip : {
					 valueSuffix : saleUnit
				},
				legend : {
					enabled : false
				},
				credits : {
					enabled : false,// 默认值，如果想去掉版权信息，设置为false即可
					text : 'Niushop商城', // 显示的文字
					href : '#', // 链接地址
				},
				exporting : {
					allowHTML : true,
					buttons : {
						contextButton : {
						// text : '导出'
						}
					}
				},
				series : [ {
					name : '今日',
					data : saleMoneyStatistical
				}]
			});
			
			//初始化年、月、周
			getYear();
			getMonth();
			getWeeks();
			
			search(1);
		});
		
		//走势图数据
		function getGoodsSalesCharts(var_type){
			
			var type = $("#type").val();
			var year = $("#year").val();
			var month = $("#month").val();
			var week = $("#week").val();
			var day = $("#day").val();

			$.ajax({
				type : "post",
				url : "{:__URL('PLATFORM_MAIN/statistics/getshoporderchartcount')}",
				data:{ 
					'type':type,
					'year':year,
					'month':month,
					'week':week,
					'day':day,
					'var_type':var_type
				},
				success : function(data) {
					//console.log(data);
					if(var_type == 1){
						
						saleUnit = "元";
						saleNumStatistical = data[0];
						saleNumChart.update({
							xAxis : {
								categories : saleNumStatistical
							},
							tooltip : {
								 valueSuffix : saleUnit
							},
							series : [ {
								name : "订单金额",
								data : data[1]
							}],
							yAxis : {
								title : {
									text :saleUnit
								},
								plotLines : [ {
									value : 0,
									width : 1,
									color : '#808080'
								} ]
							},
						})
						
					}else{
						
						saleUnit = "笔";
						saleTimeStatistical = data[0];
						saleMoneyChart.update({
							xAxis : {
								categories : saleTimeStatistical
							},
							tooltip : {
								 valueSuffix : saleUnit
							},
							series : [ {
								name : "订单量",
								data : data[1]
							}],
							yAxis : {
								title : {
									text :saleUnit
								},
								plotLines : [ {
									value : 0,
									width : 1,
									color : '#808080'
								} ]
							},
						})
						
					}
				
				}
			});
		}
		
		//平台总统计概述
		function getSaleInfo(){
			var date = $("#search_type").val();
			$.ajax({
				type : "post",
				url : "{:__URL('PLATFORM_MAIN/statistics/getordershopsalecount')}",
				data:{"date":date},
				success : function(data) {
					$("#member_count").text(data["member_count"]);
					$("#integral_sum").text(data["integral_sum"]);
				}
			})
		}		
		
		//平台相关情报统计
		function getCountInfo(){
			
			var type = $("#type").val();
			var year = $("#year").val();
			var month = $("#month").val();
			var week = $("#week").val();
			var day = $("#day").val();
			
			$.ajax({
				type : "post",
				url : "{:__URL('PLATFORM_MAIN/statistics/getCountInfo')}",
				data:{
					'type':type,
					'year':year,
					'month':month,
					'week':week,
					'day':day,
				},
				success : function(data) {
					//console.log(data);
					$("#money").text(data["count_money"] + '元');
					$("#num").text(data["count_num"]);
					$("#order_member_count").html(data['order_member_count']);
					$("#order_goods_count").html(data['order_goods_count']);
					$("#add_member_count").html(data['add_member_count']);
					$("#add_shop_count").html(data['add_shop_count']);
					$("#add_goods_count").html(data['add_goods_count']);
					
				}
			})
		}
		
		//搜索
		function search(){
			
			//变换数据标题
			alter_count_title();
			//下单金额统计图
			getGoodsSalesCharts(1);
			//下单量统计图
			getGoodsSalesCharts(2);
			//相关统计数据
			getCountInfo();
			
		}
		
		//选择统计方式
		function count_select(type){
			$(".count-1,.count-3,.count-4").hide();
			$(".count-" + type).show();
		}
		
		//获取某年某月的所包含的周
		$("#year,#month").bind('change',function(){
			getWeeks();
		})
		
		// 获取周
		function getWeeks(){
			var year = $("#year").val();
			var month = $("#month").val();
			
			$.ajax({
				type : "post",
				url : "{:__URL('PLATFORM_MAIN/statistics/getWeeks')}",
				data:{
					'year':year,
					'month':month,
				},
				async: false,
				success : function(data) {
					//console.log(data);
					var html = '';
					for(var i=0;i < data.length;i++){
						html += '<option value="'+ data[i]['week_first_day'] +'">' + data[i]['week_remark'] + '</option>';
					}
					$("#week").html(html);
					
					var html1 = '';
					for(var i=0;i < data.length;i++){
						html1 += '<input type="hidden" data="'+ data[i]['week_first_day'] +'" value="'+ data[i]['week_remark'] +'"/>';
					}
					$("#week").next().html(html1);
				}
			})
		}
		
		//获取年
		function getYear(){
			var date = new Date();
			var year = date.getFullYear();
			var html = '';
			for(var i=2017;i < 2027;i++ ){
				if(i == year){
					html += '<option selected>'+ i +'</option>';
				}else{
					html += '<option >'+ i +'</option>';
				}
			}
			$("#year").html(html);
		}
		
		//获取月
		function getMonth(){
			var date = new Date();
			var month = date.getMonth();
			
			var html = '';
			var arr = ['01','02','03','04','05','06','07','08','09','10','11','12'];
			for(var i=0;i < 12;i++ ){
				if(i == month){
					html += '<option selected>'+ arr[i] +'</option>';
				}else{
					html += '<option >'+ arr[i] +'</option>';
				}
			}
			$("#month").html(html);
		}
		
		//转换统计时间段 标题
		function alter_count_title(){
			
			var type = $("#type").val();
			var year = $("#year").val();
			var month = $("#month").val();
			var week = $("#week").val();
			var week_remark = $("#week").next().find("input[data="+ week +"]").val();
			var day = $("#day").val();
			
			var title = '';
			
			if(type == 1){
				title = day;
			}else if(type == 3){
				title = week_remark;
			}else if(type == 4){
				title = year + '年' + month + '月';
			}
			
			$(".count-title").html(title);
		}
		</script>            
            
{/block}

